<template>
  <div>
    <span v-if="!editMode">
      {{ value }}
      <el-link :underline="false" @click="open">
        <i class="el-icon-edit" />
      </el-link>
    </span>
    <span v-else>
      <form style="display: inline-block;">
        <el-input v-model="value" :type="type" autofocus="true" @change="update" @blur="cancel" />
      </form>
    </span>
  </div>
</template>

<script>
export default {
  name: 'EditableText',
  props: {
    inputValue: {
      required: true
    },
    type: {
      type: String,
      required: false,
      default: 'text'
    },
    element: {
      required: true
    }
  },
  data() {
    return {
      editMode: false,
      value: ''
    }
  },
  mounted() {
    this.value = this.inputValue
  },
  methods: {
    open() {
      this.value = this.inputValue
      this.editMode = true
    },
    update() {
      this.editMode = false
      this.$emit('confirm', this.element, this.inputValue, this.value)
    },
    cancel() {
      this.editMode = false
    }
  }
}
</script>

<style>

</style>
